<template>
	<view class="page_wrapper">
		<Navbar title="口算练习记录"></Navbar>
		<view class="pagebox">
			<block v-if="mathExamLogs.length === 0">
				<view class="nodata_block">
					<image class="nodata" src="@/static/images/nodata.png" mode="aspectFit"></image>
					<button class="green_btn start_exam_btn" @click="startExam()">马上练习</button>
				</view>
			</block>
			<block>
				<view class="page_sub_wrapper">
					<view v-for="(mathExam, index) in mathExamLogs" :key="index" class="math_exam_block" @click="showLog(mathExam)">
						<image class="exam_list_icon" src="../../static/nimg/list_time.png" mode=""></image>
						<view class="exam_left_block">
							<view class="exam_title">{{mathExam.title}}</view>
							<view class="exam_status_block">
								<view class="">
									<span>状态:</span>
									<span v-if="mathExam.status == '1'" class="status undo">{{statusName(mathExam.status)}}</span>
									<span v-else class="status did">{{statusName(mathExam.status)}}</span>
								</view>
								<view class="">
									{{mathExam.createDate}}
								</view>
							</view>
						</view>
						<view class="icon_block">
							<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
						</view>
					</view>
				</view>
			</block>
		</view>
		<image src="../../static/nimg/bg.png" class="page_bg_img" mode=""></image>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import Navbar from '@/components/navbar.vue'
	export default {
		components:{
			Navbar
		},
		data() {
			return {
				query: {
					pageNo: 1,
					pageSize: 20
				},
				mathExamLogs: []
			}
		},
		onShow() {
			this.fetchData()
		},
		onBackPress(option) {
			console.log(option);
		},
		methods: {
			statusName(value){
				return value == '1'?'未完成':'已完成'
			},
			fetchData() {
				uni.showLoading()
				request.get("/topicRecord/list")
				.then(res=>{
					uni.hideLoading()
					console.log(res);
					this.mathExamLogs = res.result.dataList
				})
			},
			startExam() {
				uni.navigateTo({
					url: '/pages/mathExam/mathExam'
				})
			},
			showLog(data) {
				if(data.status==1){
					if(data.title.includes("口算出题")){
						uni.navigateTo({
							url:'/pages/mathCalcs/onlineTest?examId='+data.id+'&edit=1&time='+data.expendTime
						})
					}else{
						uni.navigateTo({
							url:'/pages/mathCalcTwoOptLogs/mathCalcTwoOptLogs?examId='+data.id+'&edit=1&time='+data.expendTime
						})
					}
				}else{
					uni.navigateTo({
						url: '/pages/mathExamLogs/mathExamLog/mathExamLog?data='+JSON.stringify(data)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		overflow: hidden;
		.pagebox{
			overflow-y: scroll;
			margin: 30rpx 0;
			height: 85%
		}
		.nodata_block{
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.nodata{
				width: 200px;
			}
			.start_exam_btn{
				width: 150px;
				margin-bottom: 200px;
			}
		}
		.page_sub_wrapper{
			display: flex;
			flex-direction: column;
			row-gap: 20rpx;
			.math_exam_block{
				// min-height: 70px;
				display: flex;
				align-items: center;
				background-color: #C4E6C2;
				border-radius: 20rpx;
				padding: 10rpx 20rpx;
				color: #074F1E;
				.exam_list_icon{
					height: 40rpx;
					width: 40rpx;
					margin-right: 20rpx;
				}
				.exam_left_block{
					flex: 1;
					.exam_title{
						font-size: 17px;
						font-weight: 500;
						margin-bottom: 4rpx;
					}
					.exam_status_block{
						display: flex;
						font-size: 14px;
						color: #50974B;
						column-gap: 10%;
						.undo{
							color: red;
						}
						.status{
							margin-left: 20rpx;
						}
					}
				}
				.icon_block {
					width: 40rpx;
					height: 40rpx;
					.right_icon {
						width: 18rpx;
						height: 30rpx;
					}
				}
			}
		}
	}
</style>
